﻿@using CarCareTracker.Helper
@using System.Globalization
<!DOCTYPE html>
@inject IConfigHelper config
@inject ITranslationHelper translator
@{
    var userConfig = config.GetUserConfig(User);
    var useDarkMode = userConfig.UseDarkMode;
    var useSystemColorMode = userConfig.UseSystemColorMode;
    var enableCsvImports = userConfig.EnableCsvImports;
    var useMPG = userConfig.UseMPG;
    var useMarkDown = userConfig.UseMarkDownOnSavedNotes;
    var useThreeDecimals = userConfig.UseThreeDecimalGasCost;
    var automaticDecimalFormat = userConfig.AutomaticDecimalFormat;
    var shortDatePattern = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern;
    var firstDayOfWeek = (int)CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek;
    var numberFormat = CultureInfo.CurrentCulture.NumberFormat;
    var userLanguage = userConfig.UserLanguage;
    shortDatePattern = shortDatePattern.ToLower();
    if (!shortDatePattern.Contains("dd"))
    {
        shortDatePattern = shortDatePattern.Replace("d", "dd");
    }
    if (!shortDatePattern.Contains("mm"))
    {
        shortDatePattern = shortDatePattern.Replace("m", "mm");
    }
}
<html lang="en" data-bs-theme="@(useDarkMode ? "dark" : "light")">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-title" content="LubeLogger" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#181818">
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f3f3f3">
    <title>@ViewData["Title"] - LubeLogger</title>
    <link rel="icon" type="image/x-icon" href="~/favicon.ico">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap-icons.css" />
    <link rel="stylesheet" href="~/lib/bootstrap-datepicker/css/bootstrap-datepicker.min.css" />
    <link rel="stylesheet" href="~/lib/bootstrap-tagsinput/bootstrap-tagsinput.css" />
    <link rel="stylesheet" href="~/css/site.css"/>
    <link rel="stylesheet" href="~/css/loader.css"/>
    <link rel="stylesheet" href="~/sweetalert/sweetalert2.min.css"/>
    <link rel="icon" sizes="192x192" href="~/defaults/lubelogger_icon_192.png" />
    <link rel="icon" sizes="128x128" href="~/defaults/lubelogger_icon_128.png" />
    <link rel="apple-touch-icon" sizes="128x128" href="~/defaults/lubelogger_icon_128.png" />
    <link rel="apple-touch-icon-precomposed" sizes="128x128" href="~/defaults/lubelogger_icon_128.png" />
    <link rel="apple-touch-startup-image" href="~/defaults/lubelogger_launch.png" />
    <link rel="manifest" href="~/manifest.json">
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/js/shared.js?v=@StaticHelper.VersionNumber"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="~/lib/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
    <script src="~/sweetalert/sweetalert2.all.min.js"></script>
    <script src="~/js/loader.js?v=@StaticHelper.VersionNumber"></script>
    <script>
        function getGlobalConfig() {
            return {
                useDarkMode: "@useDarkMode" == "True" || ("@useSystemColorMode" == "True" && window.matchMedia('(prefers-color-scheme: dark)').matches),
                enableCsvImport : "@enableCsvImports" == "True",
                useMarkDown: "@useMarkDown" == "True",
                currencySymbol: decodeHTMLEntities("@numberFormat.CurrencySymbol"),
                useThreeDecimals: "@useThreeDecimals" == "True",
                useMPG: "@useMPG" == "True",
                firstDayOfWeek: @firstDayOfWeek
            }
        }
        function getShortDatePattern() {
            return {
                pattern: "@shortDatePattern"
            }
        }
        function globalParseFloat(input){
            //remove thousands separator.
            var thousandSeparator = decodeHTMLEntities("@numberFormat.NumberGroupSeparator");
            var decimalSeparator = decodeHTMLEntities("@numberFormat.NumberDecimalSeparator");
            var currencySymbol = decodeHTMLEntities("@numberFormat.CurrencySymbol");
            if (input == "---") {
                input = "0";
            }
            //strip thousands from input.
            input = input.replace(thousandSeparator, "");
            //convert to JS format where decimal is only separated by .
            input = input.replace(decimalSeparator, ".");
            //remove any currency symbol
            input = input.replace(currencySymbol, "");
            return parseFloat(input);
        }
        function globalFloatToString(input) {
            var decimalSeparator = decodeHTMLEntities("@numberFormat.NumberDecimalSeparator");
            input = input.replace(".", decimalSeparator);
            return input;
        }
        function fixDecimalInput(input, numOfDecimals) {
            if ("@automaticDecimalFormat" == "True") {
                //get the decimal separator.
                var decimalSeparator = decodeHTMLEntities("@numberFormat.NumberDecimalSeparator");
                var inputText = $(input).val().trim();
                inputText = inputText.replace(decimalSeparator, '');
                inputText = +inputText;
                if (isNaN(inputText)){
                    return;
                }
                inputText = inputText.toString();
                if (inputText == '') {
                    return;
                };
                //check number of decimals.
                if (inputText.length <= numOfDecimals) {
                    //less than number of decimals, assume everything is behind the decimal.
                    inputText = `0${decimalSeparator}${inputText}`; //add leading zero.
                    $(input).val(inputText);
                } else {
                    //check if leading zero
                    var charToSlice = numOfDecimals * -1;
                    var charsBehindDecimal = inputText.slice(charToSlice);
                    var charsFrontDecimal = inputText.substr(0, inputText.length - numOfDecimals);
                    inputText = `${charsFrontDecimal}${decimalSeparator}${charsBehindDecimal}`;
                    $(input).val(inputText);
                }
            }
        }
        function interceptDecimalKeys(event) {
            if ("@automaticDecimalFormat" == "True") {
                if (event.which == 190 || event.which == 188) {
                    event.preventDefault(); //intercept keys.
                }
            }
        }
        function genericErrorMessage(){
            return decodeHTMLEntities('@translator.Translate(userLanguage, "An error has occurred, please try again later")');
        }
        function globalAppendCurrency(input){
            //check currency symbol position
            var currencySymbolPosition = "@numberFormat.CurrencyPositivePattern";
            var currencySymbol = decodeHTMLEntities("@numberFormat.CurrencySymbol");
            switch (currencySymbolPosition) {
                case "0":
                    return `${currencySymbol}${input}`;
                    break;
                case "1":
                    return `${input}${currencySymbol}`;
                    break;
                case "2":
                    return `${currencySymbol} ${input}`;
                    break;
                case "3":
                    return `${input} ${currencySymbol}`;
                    break;
            }
        }
        function setThemeBasedOnDevice() {
            var systemPrefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
            if (systemPrefersDarkMode) {
                $(document.documentElement).attr("data-bs-theme", "dark");
            }
        }
    </script>
    @await RenderSectionAsync("Scripts", required: false)
</head>
<body>
    @await RenderSectionAsync("Nav", required: false)
    <div class="container lubelogger-body-container">
        <main role="main">
            @RenderBody()
        </main>
    </div>
    @await RenderSectionAsync("Footer", required: false)
</body>
</html>
@if (useSystemColorMode)
{
    <script>
        setThemeBasedOnDevice();
    </script>
}